<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Welcome</title>
        <!--below css stylesheet defines page design-->
        <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="wrapper">
            <!--SuperSeeker logo-->
            <img alt="." src="images/mylogo.jpg"/>

            <!--below is code for the menubar-->
            <ul id="blue">
                <!--each bar in the menu is a submit button with actions-->
                <!--the action attribute describes the event-->
                <form method="get" action="Logout.do">
                    <input type="submit" value="logout"/>
                </form>

                <form method="get" action="Toptags.do">
                    <input type="submit" value="topTags"/>
                </form>

                <form method="get" action="EditAccount.do">
                    <input type="submit" value="myAccount"/>
                </form>

                <form method="get" action="ViewAllTags.do">
                    <input type="submit" value="myTags"/>
                </form>

                <form method="get" action="ViewAllImages.do">
                    <input type="submit" value="myImages"/>
                </form>
                
                <form method="get" action="ViewAllFriends.do">
                    <input type="submit" value="myPals"/>
                </form>

                <form method="get" action="ReturnHome.do">
                    <input type="submit" value="home"/>
                </form>
            </ul>
            <!--end menubar-->

            <div class="profilePic">
                <img alt="." src="images/<c:out value="${myPicture}"/>"/>
            </div>
            
            <div id="greeting">
                <h1>Hello <c:out value="${myName}"/>!</h1>
            </div>

            <!--button to add tags-->
            <div id="addButtonsRight">
                <form method="get" action="ViewAllImages.do">
                    <p class="submitBig"><input type="submit" value="Add Tags"/></p>
                </form>
            </div>

            <!--button to add friends-->
            <div id="addButtonsRight">
                <form method="get" action="ListNonFriends.do">
                    <p class="submitBig"><input type="submit" value="Add Pals"/></p>
                </form>
            </div>

            <!--form to add images-->
            <div id="addImg">
                <form method="get" action="AddImage.do" id="formwrapper">
                    <fieldset>
                        <legend>Add Images</legend>
                        <p><input type="file" name="addImage"/></p>
                        <p class="submit"><input type="submit" value="Upload"/></p>
                    </fieldset>
                </form>
            </div>
            <br/><br/><br/><br/>

            <h2 id="clrBoth">Recent Activity</h2>

            <!--splits the page into 3 equal colums. id="innercontainer"
            contains the first 2 columns, while id="sidebar" represents
            the rightmost column-->
            <div id="innercontainer">
                <!--represents the center column-->
                <div id="content">
                    <!--displays the recent tags added, chronologically-->
                    <c:forEach items="${allFriendsTags}" var="allFrTag">
                        <div class="curved-box">
                            <!--image which was tagged-->
                            <h2>Tagged</h2>
                            <form method="get" action="ViewImage.do">
                                <p><input type="image" alt="." height="120" width="125" src="resources/<c:out value="${allFrTag.upload.image}"/>"/></p>
                                <input type="hidden" name="uploader" value="<c:out value="${allFrTag.upload.name}"/>"/>
                                <input type="hidden" name="uploadedImg" value="<c:out value="${allFrTag.upload.image}"/>"/>
                                <input type="hidden" name="uploaderDT" value="<c:out value="${allFrTag.upload.datetime}"/>"/>
                            </form>
                            <!--who tagged it-->
                            <form method="get" action="ViewProfile.do">
                                <p class="submit" id="submitp">Tagger: <input type="submit" name="mutFriend" value="<c:out value="${allFrTag.tagger}"/>"/></p>
                            </form>
                            <!--what is the tag-->
                            <form method="get" action="ViewTag.do">
                                <p class="submit" id="submitp">Tag: <input type="submit" name="viewTags" value="<c:out value="${allFrTag.tag}"/>"/></p>
                            </form>
                            <!--when it was tagged-->
                            <h4 id="imgMetaData">On: <c:out value="${allFrTag.tagdatetime}"/></h4>
                        </div>
                    </c:forEach>
                </div>
                <!--represents the leftmost column-->
                <div id="innersidebar">
                    <!--displays the recent images added, chronologically-->
                    <c:forEach items="${allFriendsImages}" var="allFrImg">
                        <div class="curved-box">
                            <h2>Image</h2>
                            <!--display the image-->
                            <form method="get" action="ViewImage.do">
                                <p><input type="image" alt="." height="120" width="125" src="resources/<c:out value="${allFrImg.image}"/>"/></p>
                                <input type="hidden" name="uploader" value="<c:out value="${allFrImg.name}"/>"/>
                                <input type="hidden" name="uploadedImg" value="<c:out value="${allFrImg.image}"/>"/>
                                <input type="hidden" name="uploaderDT" value="<c:out value="${allFrImg.datetime}"/>"/>
                            </form>
                            <!--who uploaded image-->
                            <form method="get" action="ViewProfile.do">
                                <p class="submit" id="submitp">Uploader: <input type="submit" name="mutFriend" value="<c:out value="${allFrImg.name}"/>"/></p>
                            </form>
                            <p id="submitp">Who is your</p>
                            <p id="submitp">mutual friend.</p>
                            <!--when was it uploaded-->
                            <h4 id="imgMetaData">On: <c:out value="${allFrImg.datetime}"/></h4>
                        </div>
                    </c:forEach>
                </div>
            </div>
            <!--represents rightmost column-->
            <div id="sidebar">
                <!--displays all friend requests-->
                <c:forEach items="${friendRequests}" var="req">
                    <div class="curved-box">
                        <h2>Request</h2>
                        <!--view persons profile, something which cannot be
                        done till you accept him/her-->
                        <form method="get" action="ViewProfile.do">
                            <p><input type="image" alt="." height="120" width="125" src="images/<c:out value="${req.picture}"/>"/></p>
                            <input type="hidden" name="mutFriend" value="<c:out value="${req.friend}"/>"/>
                        </form>
                        <!--accept request-->
                        <form method="get" action="ConfirmFriendReq.do">
                            <p class="submit"><input type="submit" value="Confirm"/></p>
                            <input type="hidden" name="confirm" value="<c:out value="${req.friend}"/>"/>
                        </form>
                        <!--decline request-->
                        <form method="get" action="DeclineFriendReq.do">
                            <p class="submit"><input type="submit" value="Decline"/></p>
                            <input type="hidden" name="decline" value="<c:out value="${req.friend}"/>"/>
                        </form>
                        <!--time the request was sent-->
                        <h4 id="imgMetaData"><c:out value="${req.friend}"/>@<c:out value="${req.datetime}"/> </h4>
                    </div>
                </c:forEach>
            </div>
        </div>
    </body>
</html>
